<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:sisguia="http://guiav6.com.br/sisguia"
	template="/pages/template/layoutAdmin.xhtml">

<ui:define name="body">

	<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/selectable-firefox.css" />
	<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/jquery-ui.css" />

	<script type="text/javascript">
		
		var arraySelected = new Array();
		var arrayIndisponible = new Array();
	
		function loadComponenteSelecao(){
			$("#selectable").selectable({
				start: function() {
					arraySelected = new Array();
				},
				stop: function(){
					var index = 0;
					$(".ui-selected", this).each(function() {
						var idDiv = $("#selectable div").index(this) + 1;
						var tam = arrayIndisponible.length;
						arraySelected[index] = idDiv;
						index++;
						for(var i in tam){
							if(idDiv == arrayIndisponible[i]){
		                		$(this).removeClass("ui-selected");
		                		arraySelected.pop();
		                		index--;
		                	}
						}
					});
					document.getElementById("posicao").value = arraySelected;
				}
			});
		}
	
	</script>

	<h:form prependId="false">
	
		<h:panelGroup layout="block" id="cadastro">
		
			<h:panelGroup layout="block" id="txtInformativoPagina">
				<h:outputText value="#{msg['label.cadastro.mapa']}" />
			</h:panelGroup>
			
			<h:panelGroup layout="block" styleClass="painel">
				
				<h:panelGroup layout="block" styleClass="divLabelForm">
					<h:outputLabel value="#{msg['label.cep']}"></h:outputLabel>
				</h:panelGroup>
				<h:panelGroup layout="block" styleClass="divInputAddForm">
					<p:inputText value="#{mapaAction.cep.nuCep}" size="8" maxlength="8" />
					<h:inputHidden id="posicao" value="#{mapaAction.bloco.posicao}" />
					<p:spacer width="10" />
				</h:panelGroup>
				<h:panelGroup layout="block" styleClass="divInputAddForm">
					<p:commandLink ajax="true" actionListener="#{mapaAction.findMapaByCep}" update="cadastro panelMapa :msgSistemaGeral" oncomplete="if (!args.validationFailed &amp;&amp; args.ok) wdgMapa.show(); loadComponenteSelecao();">
						<h:graphicImage value="/img/btn_add.png" />
					</p:commandLink>
				</h:panelGroup>
				
				<p:dialog id="panelMapa" resizable="false" width="540" height="465" showEffect="clip" widgetVar="wdgMapa">
					<h:panelGroup layout="block" id="headerLogradouroMapa">
						<h:outputText value="#{mapaAction.logradouro}" />
					</h:panelGroup>
					<div id="selectable" style="background-image: url('#{request.contextPath}#{mapaAction.cep.pathMapa}');">
						<ui:repeat var="bloco" value="#{sisguia:mapToList(mapaAction.blocoMap)}">
							<div class="#{bloco.value}"></div>
						</ui:repeat>
					</div>
					
					<p:spacer height="10" />
					
					<h:panelGroup layout="block" styleClass="divInputForm" style="text-align: center;">
						<p:commandLink ajax="true" actionListener="#{mapaAction.salvar}" update=":msgSistemaGeral">
							<h:graphicImage value="/img/btn_cadastrar.png" />
						</p:commandLink>
					</h:panelGroup>
				</p:dialog>
				
				<h:panelGroup layout="block" styleClass="clearAll">
				</h:panelGroup>
				
			</h:panelGroup>
		
		</h:panelGroup>
	
	</h:form>
	
</ui:define>
</ui:composition>